<template>
  <div>

    <div v-if="articles.length==0">
      <h2>加载中...</h2>
    </div>

    <div v-else style="margin-left: 1.25rem;" v-cloak>
      <!-- <div id="did">
      主要区域，目前想法：每次加载一定量文章，然后有下一页的按键，类似无限流
    </div> -->
      <div>
        <div style="text-align: left; margin-left: 15px; margin-top: 20px;">最新文章</div>
        <hr />
      </div>

      <div>
        <article-item v-for="item,index in articles" :key="index" :article="item"></article-item>
      </div>

      <div>
        <div class="block">
          <el-pagination layout="prev, pager, next" :page-count="pageCount" :hide-on-single-page="true" @current-change="loadMoreMsg">
          </el-pagination>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import ArticleItem from '@/components/article-item.vue'
  import {
    list,
    listPage,
    getPageCount,
    getMaxId,
    getArticleByLabelId
  } from '@/api/Article.js'

  export default {
    data() {
      return {
        // 当前页文章的最小id
        minId: null,
        // 文章的最大id
        maxId: null,
        // 当前每页文章列表的最大容纳数
        numberOfPage: 6,
        // 总页数
        pageCount: 1,
        // 当前条件下文章列表
        articles: []
      }
    },

    components: {
      'article-item': ArticleItem
    },

    methods: {

      // 后续查询文章列表
      loadMoreMsg(currentPage) {
        var that = this
        var currentMinId;
        if (that.minId[currentPage - 1] == undefined) {
          currentMinId = that.maxId - (currentPage - 1) * that.numberOfPage
        } else {
          currentMinId = that.minId[currentPage - 1]
        }

        listPage(currentMinId, this.numberOfPage).then(resp => {
          if (resp.data.length == 0) {
            alert('没有更多了')
            return
          }
          that.articles = resp.data
          that.minId[currentPage] = resp.data[resp.data.length - 1].id
        }).catch(error => {
          console.log(error)
          that.$router.push('/error')
        })
      }

    },

    mounted() {
      var that = this

      // 初始化页数
      getPageCount(this.numberOfPage).then(resp => {
        that.pageCount = resp.data
        that.minId = new Array(resp.data.length).fill(0)
        // 初始化文章最大id

        getMaxId().then(res => {
          that.maxId = res.data
          that.minId.push(res.data + 1)
        })

        // 首次查询文章列表
        list(this.numberOfPage).then(resp => {
          if (resp.data.size == 0) {
            alert('没有更多了')
            return
          }
          that.articles = resp.data
          that.minId[1] = resp.data[resp.data.length - 1].id
        }).catch(error => {
          console.log(error)
          that.$router.push('/error')
        })

      }).catch(error => {
        console.log(error)
        this.$router.push('/error')
      })

    },

    watch: {
      $route(to, from) {
        var that = this

        if (this.$route.params.labelId !== undefined) {

          getArticleByLabelId(this.$route.params.labelId, this.numberOfPage).then(resp => {
            if (resp.data.length == 0) {
              that.$message('相关类别没有更多了')
              return
            }

            that.articles = resp.data
            that.minId[1] = resp.data[resp.data.length - 1].id
          }).catch(error => {
            console.log(error)
            that.$router.push('/error')
          })

          getPageCount(this.numberOfPage, this.$route.params.labelId).then(resp => {
            that.pageCount = resp.data
          }).catch(error => {
            console.log(error)
            that.$router.push('/error')
          })

          return

        } else {

          list(this.numberOfPage).then(resp => {

            if (resp.data.size == 0) {
              alert('没有更多了')
              return
            }
            that.articles = resp.data
            that.minId[1] = resp.data[resp.data.length - 1].id

          }).catch(error => {
            console.log(error)
            that.$router.push('/error')
          })

          getPageCount(this.numberOfPage).then(resp => {
            that.pageCount = resp.data
          }).catch(error => {
            console.log(error)
            that.$route.push('/error')
          })


        }
      }
    }
  }
</script>

<style>
  [v-cloak] {
    display: none;
  }

  #did {
    background-color: blue;
  }

  article-item:hover {
    opacity: 0;
  }
</style>
